<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-themes-web-app-capable" content="yes">
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <meta content="email=no" name="format-detection" />
        <meta name="format-detection" content="telephone=no">
        <title>俱乐部管理</title>
        <script src="js/jquery-2.1.1.js"></script>
        <script type="javascript" src="js/fonts.js"> </script>
        <link rel="stylesheet" href="css/all.css">
	</head>
	<body>
		<div>
	          	<div id="friend_title" class="friend_title">
			        <span class="selected ">关注</span>
			        <span class="flex1">粉丝</span>
			        <span class="flex1">推荐用户</span>
		      	</div>
	          
	          	<div id="friend_content">
	          		<dl>
			          	<div class="flex_row friend_bor">
				    		<div class="flex1 friend_pic">
				    			<img src="images/userimg1.png" alt="" />
				    		</div>
					   		<div class="flex4">
			 					<div class="friend_name">james</div>
			    				<div class="friend_signature">一起玩</div>
			    			</div>
			    		</div>
			      	</dl>
			      	
			      	<dl class="hide">
			          	<div class="flex_row friend_bor">
				    		<div class="flex1 friend_pic">
				    			<img src="images/userimg1.png" alt="" />
				    		</div>
					   		<div class="flex3">
			 					<div class="friend_name">james</div>
			    				<div class="friend_signature">一玩</div>
			    			</div>
			    			<div class="flex1 friend_pass">
				    			<img src="images/Feed-button-guanzhu.png" alt="" />
				    		</div>
				    	</div>
			      	</dl>
			      	
			      	<dl class="hide">
			          	<div class="flex_row friend_bor">
				    		<div class="flex1 friend_pic">
				    			<img src="images/userimg1.png" alt="" />
				    		</div>
					   		<div class="flex3">
			 					<div class="friend_name">james</div>
			    				<div class="friend_signature">一起</div>
			    			</div>
			    			<div class="flex1 friend_pass">
			    				<img src="images/Feed-button-guanzhu.png" alt="" />
			    			</div>
			      		<div>
	          		</dl>
		</div>
		<script language="javascript">
		    $('#friend_title span').click(function(){
		        $(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除；
		        $("#friend_content > dl").hide().eq($('#friend_title span').index(this)).show();
		    });
		</script>
	</body>
</html>
